<template>
  <div class="sign-in-subscribe-sign-in">
    <c-title text="预约"></c-title>
    <div class="header">
      <div class="flex align-center">
        <img style="width: 0.7813rem; margin-right: 0.4375rem;"
          src="../../../assets/images/sign_in_subscribe/sign_in_subscribe_message.png" />
        <span>{{active_value_name}}</span>
      </div>
      <div class="price">{{ active_value }}</div>
    </div>
    <ul class="box">
      <li v-for="(item, i) in list" @click="handle(item.status, i)" :key="i" class="box-item"
        :class="{ 'active': current_index == i }">{{ item.label }}</li>
    </ul>
    <subscribe-component :listData="listData" @dialog_sign="dialog_sign" @finish="finish" />
    <div class="dialog" v-if="show_dialog">
      <p class="title">{{ subscribe_title }}</p>
      <div class="radio-group" v-if="is_admin">
        <div v-for="(item, i) in sex" :key="item" class="radio-group">
          <span class="radio" :class="index == i ? 'select' : ''"
            @click="choose(i, item == '会员' ? 'member' : 'admin')">&nbsp;</span>
          <span class="m-l-5">
            {{
                item
            }}
          </span>
        </div>
      </div>
      <div>
        <input v-model="count" type="number" :placeholder="`预约数量：${datas.min_limit}-${datas.max_limit}`"
          :mix="datas.min_limit" :max="datas.max_limit" />

        <p style="font-size: 0.75rem; text-align: left;">当前{{active_value_name}}：{{ active_value }}</p>
      </div>
      <div class="btn-group">
        <van-button color="#D1D1D1" size="small" @click="show_dialog = false">取消</van-button>
        <van-button color="#EF3532" size="small" @click="confirm('subscribe')">确认</van-button>
      </div>
    </div>

    <div class="password-dialog" v-if="show_pay">
      <div class="title">
        请输入密码
        <div class="close" @click="show_pay = false"></div>
      </div>
      <div class="radio-group m-b-1">
        <div v-for="(item, i) in type" :key="item" class="radio-group">
          <span class="radio" :class="pay_index == i ? 'select' : ''" @click="choose(i, 'pay')">&nbsp;</span>
          <span class="m-l-5">
            {{
                item
            }}
          </span>
        </div>
      </div>
      <div>
        <input v-model="password" type="password" :placeholder="pay_index == 0 ? '请输入登录密码' : '请输入支付密码'" />
      </div>
      <div class="btn-group-pay">
        <van-button color="#D1D1D1" size="small" @click="show_pay = false">取消</van-button>
        <van-button color="#EF3532" size="small" @click="confirm('pay')">确认</van-button>
      </div>
    </div>
    <van-overlay :show="password_show" @click="password_show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="flex">
            <span class="flex-1">提示</span>
            <van-icon name="cross" @click="password_show = false" />
          </div>
          <div class="error-password">支付密码输入错误</div>
          <div class="group-btn">
            <van-button size="small" style="border-radius: 0.3rem;" @click="password_handle('forget')">忘记密码</van-button>
            <van-button size="small" style="border-radius: 0.3rem;" type="danger" @click="password_handle('input')">重新输入
            </van-button>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import subscribeComponent from "../component/subscribe_component.vue";
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  components: { subscribeComponent },
  data() {
    return {
      list: [
        { label: "全部", status: null },
        { label: "未开始", status: 0 },
        { label: "进行中", status: 1 },
        { label: "已成功", status: 2 },
        { label: "已失败", status: 44 }
      ],

      sex: ["会员", '管理员'],
      type: ['登录密码', '支付密码'],
      index: 0,
      current_index: 0,
      pay_index: 0,
      role: "member",
      listData: [],
      subscribe_title: "",
      activity_id: "",
      show_dialog: false,
      show_pay: false,
      current_page: 1,
      last_page: 1,
      is_admin: false,
      isLoadMore: true,
      datas: {},
      password_show: false,
      active_value: 0,
      is_has_password: false
    };
  },
  activated() {
    this.getData();
    this.init();
    this.get_buy_data();
    this.getBalancePwdInfo();
  },
  methods: {
    getBalancePwdInfo() {
      $http.get("member.balance-password.is-has-password", {}, "").then(
        (response) => {
          if (response.result == 1) {
            this.is_has_password = response.data.is_has
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
    choose(i, type) {
      if (type == 'member' || type == 'admin') {
        this.index = i;
        i == 1 ? this.role = 'admin' : this.role = 'member';
      } else {
        this.pay_index = i;
      }
    },
    async get_buy_data() {
      let {
        result,
        msg,
        data: { active_value, is_admin, require_pwd,active_value_name }
      } = await $http.get("plugin.sign-buy.frontend.user-sign.index");
      if (result == 0) return this.$toast(msg);
      this.active_value = active_value;
      this.require_pwd = require_pwd;
      this.is_admin = is_admin;
      this.active_value_name = active_value_name||'活跃值';
    },
    finish() {
      this.getData()
    },
    dialog_sign(data) {
      this.password = '';
      this.count = '';
      this.show_dialog = true;
      this.datas = data;
      this.subscribe_title = data.activity_name;
      this.activity_id = data.stage_id;
    },
    init() {
      this.activity_id = "";
      this.is_has_password = false;
      this.show_dialog = false;
      this.show_pay = false;
      this.current_page = 1;
      this.last_page = 1;
      this.isLoadMore = true;
      this.password_show = false;
      this.index = 0;
    },
    confirm(type) {
      if (type == "subscribe") {
        if (this.count <= 0) {
          return this.$toast("请输入有效预约数量");
        }
        if (this.index == 0) {
          if (this.require_pwd == 1) {
            this.show_pay = true;
          } else if (this.require_pwd == 0) {
            this.sigin_handle()
            this.show_dialog = false;
          }
        } else if (this.index == 1) {
          this.sigin_handle()
          this.show_dialog = false;
        }
      }
      if (type == "pay") {
        if (this.password == "") {
          return this.$toast(`请输入${this.pay_index == 0 ? "登录" : "支付"}密码`);
        }
        this.sigin_handle();
      }
    },
     password_handle(type) {
      if (type == 'forget') {
        let _url = document.location.href;
        if (this.is_has_password) {
          _url = _url.replace(/sign_in_subscribe\/sign_in/, 'member/balance_password');
          window.location.href = _url
        } else {
          _url = _url.replace(/sign_in_subscribe\/sign_in/, 'member/set_balance_password');
          window.location.href = _url
        }
      } else {
        this.password_show = false;
      }
    },
    async sigin_handle() {
      let json = {
        stage_id: this.activity_id,
        amount: this.count,
        admin: this.index
      }
      if (this.index == 0 && this.require_pwd == 1) {
        json.pwd_type = this.pay_index == 0 ? "login" : "pay";
        json.pwd = this.password;
      }

      let { result, msg, data } = await $http.get("plugin.sign-buy.frontend.user-sign.submit", json)

      if (result == 0) {
        if (this.index == 0 && this.require_pwd == 1 && this.pay_index == 1) {
          if (data.password_error == 1) {
            this.password_show = true;
          } else {
            this.$toast(msg);
          }
        } else {
          this.$toast(msg);
        }
        return;
      }
      this.show_pay = false;
      this.show_dialog = false;
      this.$toast(msg);
      this.count = '';
      this.index = 0;
      this.password = '';
      this.getData();
      this.get_buy_data();
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.current_page >= this.last_page) {
        return;
      }
      let json = {},
        status = this.list[this.current_index].status;
      json.page = this.current_page + 1;
      if (status) {
        json.status = this.list[this.current_index].status;
      }
      this.sign_list_data(json);
    },
    getData() {
      this.sign_list_data({ page: 1 });
    },
    handle(status, i) {
      this.current_index = i;
      let json = {
        page: 1
      };
      if (status !== null) {
        json.status = status;
      }
      this.sign_list_data(json);
    },
    async sign_list_data(json) {
      let { result, data, msg } = await $http.get("plugin.sign-buy.frontend.sign-buy-page.activity-list", json);
      this.isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      if (json.page == 1) {
        this.listData = data.data;
      } else {
        this.listData = this.listData.concat(data.data);
      }
      this.current_page = data.current_page;
      this.last_page = data.last_page;
    }
  }
};
</script>

<style lang="scss" scoped>
.sign-in-subscribe-sign-in {
  padding: 0 0.5rem 3.375rem;

  .group-btn {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 1rem;
  }

  .error-password {
    margin: 2rem 0;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .flex-1 {
    flex: 1;
  }

  .block {
    width: 17.75rem;
    background-color: #fff;
    border-radius: 0.625rem;
    padding: 0.6rem 0.625rem;
  }

  .m-l-5 {
    margin-left: 5px;
  }

  input {
    width: 100%;
    border-radius: 2px;
    border: 1px solid #ccc;
    margin-bottom: 0.4rem;
    padding: 5px;
    font-size: 0.9375rem;
  }

  .password-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 18rem;
    border-radius: 0.625rem;
    padding: 0.6rem 0.625rem;

    .title {
      position: relative;
      margin-bottom: 1.825rem;
    }

    .close {
      position: absolute;
      right: 0.625rem;
      top: 0;
      width: 1rem;
      height: 1rem;

      &::after {
        content: "";
        position: absolute;
        right: -12px;
        top: 6px;
        width: inherit;
        transform: rotate(45deg);
        height: inherit;
        border-left: 2px solid #000;
      }

      &::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 6px;
        width: inherit;
        height: inherit;
        border-top: 2px solid #000;
        transform: rotate(45deg);
      }
    }
  }

  .btn-group {
    margin-top: 2.1875rem;
    display: flex;
    justify-content: space-around;

    .van-button--small {
      height: 1.5625rem !important;
    }

    .van-button {
      width: 3.9375rem !important;
      border-radius: 1.25rem !important;
    }
  }

  .btn-group-pay {
    margin-top: 2.1875rem;
    display: flex;
    justify-content: space-around;

    .van-button--small {
      height: 2.25rem !important;
    }

    .van-button {
      width: 5rem !important;
      border-radius: 0.3125rem !important;
    }
  }

  .radio-group {
    display: flex;
    padding-left: 0.325rem;
    margin-bottom: 0.3rem;

    .radio-group {
      display: flex;
      align-items: center;

      &:first-child {
        margin-right: 1.25rem;
      }
    }

    .select {
      position: relative;
      background-color: red;

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 100px;
        background-color: #fff;
        transform: translate(-50%, -50%);
      }
    }

    .radio {
      width: 1rem;
      height: 1rem;
      border: 1px solid #ccc;
      border-radius: 10px;

      &radio:first-child {
        margin-right: 1.25rem;
      }
    }
  }

  .dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 17.75rem;
    border-radius: 0.625rem;
    padding: 0.6rem 0.625rem;

    .title {
      margin-bottom: 0.825rem;
    }
  }

  .price {
    color: #f51d1d;
    font-size: 1.125rem;
    font-weight: bold;
  }

  .flex {
    display: flex;
  }

  .align-center {
    justify-content: center;
  }

  .box {
    display: flex;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    justify-content: space-around;
  }

  .active {
    transition: all 0.3s ease;
    background-color: #f51d1d !important;
    color: #fff !important;
    border: 1px solid #f51d1d;
  }

  .box-item {
    width: 3.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    color: #6f6f6f;
    border-radius: 0.875rem;
    border: 1px solid #d0d0d0;
    text-align: center;
    background: #fff;
    font-size: 0.75rem;
  }

  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7e9cf;
    padding: 0.7813rem 0.6875rem;
    border-radius: 0.3125rem;
    margin-top: 0.875rem;
    background-color: rgba(242, 220, 220, 1);
  }
}
</style>